<template>
	<view v-if="(order.role==1&&order.orderInfo.type=='goods'&&order.orderInfo.release_info.is_express_price==1)
	||(order.role==2&&order.orderInfo.type=='goods'&&order.orderInfo.release_info.is_express_price==2)
	||(order.role==2&&order.orderInfo.type=='crossborder'&&order.orderInfo.release_info.is_express_price==2)
	||(order.role==1&&order.orderInfo.type=='crossborder'&&order.orderInfo.release_info.is_express_price==1)">
		<view style="margin-top: 15rpx;" v-if="loading==true&&list&&list.length!=0">{{text.son_order_no}}</view>
		<view class="lxy-content" v-if="list&&list.length!=0">
			<scroll-view scroll-x="true" class="content-scroll" scroll-with-animation :scroll-left="scrollLeft">
				<view class="tabs scroll-item" :class="[current == index ? 'border' : '']" v-for="(item, index) in list"
					:key="index" @click="orderdetail(item)" v-if="item.orderInfo.release_info.deletetime==null">
					<view class="son_order">
						<view class="son_order_title">{{$t(item.name)}}</view>
						<view class="son_order_no" style="width: 94%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							<!-- {{text.order_no}} : -->
							<text style="font-weight: 500;">{{item.order_no}}</text> 
						</view>
						<view class="flex">

							<image v-if="item.name=='运输'" :src="IMAGE_URL+'/uploads/20240520/f6b1e0a0000b632ffa502cf804b9ccd0.png'" class="son_img"></image>
							<image v-if="item.name=='跨境货代'" :src="IMAGE_URL+'/uploads/20240520/2c02bac49e932daed2a8fec76ec17508.png'" class="son_img"></image>
							
							
							<image v-if="item.from_country&&item.from_country==0" :src="HTTP_IMG_UTL+'huangjin.png'" class="son_img2"></image>
							<image v-if="item.from_country&&item.from_country==1" :src="HTTP_IMG_UTL+'huangji.png'" class="son_img2"></image>

							<text  v-if="item.from_country">>></text>
							<image v-if="item.to_country&&item.to_country==0" :src="HTTP_IMG_UTL+'huangjin.png'" class="son_img2"></image>
							<image v-if="item.to_country&&item.to_country==1" :src="HTTP_IMG_UTL+'huangji.png'" class="son_img2"></image>
							<view style="height: 50rpx;line-height: 50rpx;font-size: 20rpx;width: 60px; word-break: break-word;" v-if="item.clearance&&item.clearance==1">{{$t('报关')}}</view>
							<view style="height: 50rpx;line-height: 50rpx;font-size: 20rpx;width: 60px; word-break: break-word;" v-if="item.clearance&&item.clearance==2">{{$t('清关')}}</view>
							<view style="height: 50rpx;line-height: 50rpx;font-size: 20rpx;width: 60px; word-break: break-word;" v-if="item.clearance&&item.clearance==3">{{$t('报关')+'+'+$t('清关')}}</view>
						</view>
						<view v-if="item.status==0">
							<view class="zzjb" v-if="item.join_order_id==0">
								{{$t("正在竞标")}}
							</view>
							<view class="zzjb" v-else>
								{{$t("已合作")}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL} from "@/config/app";
	
	export default {
		components: {
			
		},
		props:{
			list:{
				type:[Array,Object,null],
				default:[]
			},
			order:{
				type:[Array,Object,null],
				default:[]
			}
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,
				
				contentScrollW: 0, // 导航区宽度
				current: 1, // 当前选中
				scrollLeft: 0, // 横向滚动条位置
				
				//语言
				lang: this.$i18n.locale,
				//文字
				text:{
					order_no:this.$t('订单号'),
					son_order_no:this.$t('关联子订单'),
				},
				loading:false,
				
			}
		},
		onReady() {
			this.getScrollW()
		},
		methods:{
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				if((this.list)&&(this.list.length!=0)){
					if((this.list)&&(this.list.length!=0)&&(this.order.role==1&&this.order.orderInfo.type=='goods'&&this.order.orderInfo.release_info.is_express_price==1)
					||(this.order.role==2&&this.order.orderInfo.type=='goods'&&this.order.orderInfo.release_info.is_express_price==2)
					||(this.order.role==2&&this.order.orderInfo.type=='crossborder'&&this.order.orderInfo.release_info.is_express_price==2)
					||(this.order.role==1&&this.order.orderInfo.type=='crossborder'&&this.order.orderInfo.release_info.is_express_price==1)){
									const query = uni.createSelectorQuery().in(this);
									query.select('.content-scroll').boundingClientRect(data => {
													// 拿到 scroll-view 组件宽度
													this.contentScrollW = data.width
									}).exec();
									query.selectAll('.scroll-item').boundingClientRect(data => {
													let dataLen = data.length;
													for (let i = 0; i < dataLen; i++) {
													  //  scroll-view 子元素组件距离左边栏的距离
													  this.list[i].left = data[i].left;
													  //  scroll-view 子元素组件宽度
													  this.list[i].width = data[i].width
													}
									}).exec()
								}
				}
				
			  
			},
			orderdetail(i){
				if(i.join_order_id){
					this.$u.route({
						url: "/pages/ordering/orderDetail",
						params: {
							id: i.id,
							join_order_id:i.join_order_id,
							isDetail:true,
							status:i.status,
						}
					})
				}else{
					this.$u.route({
						url: "/pages/order/published/published",
						params: {
							id: i.id,
							isDetail:true,
							status:i.status,
						}
					})
				}
			},
		},
		mounted() {
			
			this.loading=true
		}
	}
</script>

<style lang="scss" >
	@import "@/common/orderDetail.scss";
</style>